<template>
    <div>
        <div class="page-title-section" style=background-image:url(images/parallax-5.jpg)>
            <div class="container">
                <div class="center-holder page-title">
                    <h1>关于我们</h1>
                    <p style="color: white;">
                        一站式再生资源利用系统、商城系统、积分系统、大屏系统、微信小程序、APP研发。
                    </p>
                </div>
            </div>
        </div>

        <div class="section-block" v-if="introduction">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <p v-html="introduction.text"></p>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="teamData.length">
            <div class="container">
                <div class="center-holder section-heading">
                    <h2>团队介绍</h2>
                    <!--                    <p>123456</p>-->
                </div>
                <div class="row">

                    <div class="col-xs-12 col-md-3 col-sm-6" v-for="(item,index) in teamData" :key="index">
                        <div class="team-member">
                            <div class="team-member-image">
                                <img alt="member" :src="item.avatar"/>
                                <div class="team-member-overlay">
                                    <div class="team-member-content">
                                        {{(item.skill || []).join('、')}}
                                    </div>
                                    <!--                                    <div class="team-member-content">-->
                                    <!--                                        <a href=#><i class="fa fa-facebook-official"></i></a>-->
                                    <!--                                        <a href=#><i class="fa fa-twitter"></i></a>-->
                                    <!--                                        <a href=#><i class="fa fa-instagram"></i></a>-->
                                    <!--                                    </div>-->
                                </div>
                            </div>
                            <div class="team-member-name">
                                <h4>{{item.name}}</h4>
                                <h6>{{item.position}}</h6>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {getBaseData, getTeamList} from "../api/base";

    export default {
        name: "aboutUs",
        data() {
            return {
                introduction: null,
                teamData: []
            }
        },
        mounted() {
            this.getDataSource();
        },
        methods: {
            getDataSource: async function () {
                this.teamData = await getTeamList();

                let info = await getBaseData();
                if (info) {
                    info.forEach((item) => {
                        let key = item['keywords'];
                        if (key === 'company-introduction') {
                            this.introduction = item;
                        }
                    });
                }

            },
        }
    }
</script>

<style scoped>

</style>